<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
<script src="${ctx}/static/metronic/assets/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>
<script>
var seq = 0;

$(function(){
	$("#inputForm").validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: ".ignore",

        highlight: function (element) { // hightlight error inputs
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group   
            var icon = $(element).parent('.input-icon').children('i');
        	icon.addClass("fa-warning").removeClass("fa-check");
        },

        unhighlight: function (element) { // revert the change done by hightlight
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
            var icon = $(element).parent('.input-icon').children('i');
            icon.removeClass("fa-warning").addClass("fa-check");
        },

        success: function (label, element) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
            var icon = $(element).parent('.input-icon').children('i');
            icon.removeClass("fa-warning").addClass("fa-check");
        }
    });
	

})

function del(id){
	$("#"+id).remove();
}

function add(id){
	var fieldName = $("#fieldName").val();
	var fieldType = $("#fieldType").val();
	
	if(fieldName==""){
		bootbox.alert("属性名称不能为空！");
		return;
	}
	if(fieldType==""){
		bootbox.alert("属性类型不能为空！");
		return;
	}
	
	seq += 1;
	
	var tr ="<tr id='"+ seq +"'>"+
				"<td><input type='text' readonly=''  class='form-control ' name='fieldName"+seq+"' value='"+fieldName+"'/></td>"+
				"<td><input type='text' readonly=''  class='form-control ' name='fieldType"+seq+"' value='"+fieldType+"'/></td>"+
			
				"<td><a href='javascript:del("+seq+")' class='btn default btn-xs dark'>删除</a></td>"+
			"</tr>";
	$("#fieldTable").append(tr);
	
	$("#fieldName").val("").focus();

}

function checkValue(obj) {
	obj.value = obj.value.replace(/[\W]/g,'');
}

</script>
	<!-- select2组合框 -->
	<link rel="stylesheet" type="text/css" href="${ctx}/static/metronic/assets/plugins/select2/select2_metro.css"/>
	<script type="text/javascript" src="${ctx}/static/metronic/assets/plugins/select2/select2.min.js"></script>
</head>
<body>
<div class="page-content-wrapper">
		<div class="page-content">
			<div class="row">
				<div class="col-md-12">
					<div class="portlet box green">
						<div class="portlet-title">
							<div class="caption">
								<i class="fa fa-reorder"></i>代码生成
							</div>
						</div>
						<div class="portlet-body form">
							<!-- BEGIN FORM-->
							<form id="inputForm" action="${ctx}/code/code" enctype="multipart/form-data" method="post" class="form-horizontal">
							<div id="messageBox" class="alert alert-error input-large controls" style="display:none">输入有误，请先更正。</div>
								<div class="form-body">
									<div class="form-group">
										<label class="col-md-3 control-label">类名:</label>
										<div class="col-md-4">
											<div class="input-icon right">
												<i class="fa"></i>
												<input type="text" id="className" maxLength="200"  style="ime-mode:disabled " onkeyup="checkValue(this)" name="className" class="form-control required" placeholder="输入类名" ">
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">路径:</label>
										<div class="col-md-4">
											<div class="input-icon right">
												<i class="fa"></i>
												<input type="text" id="path" name="path"  class="form-control required"  onkeyup="checkValue(this)"  placeholder="输入请求访问的路径"/>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">表名:</label>
										<div class="col-md-4">
											<div class="input-icon right">
												<i class="fa"></i>
												<input type="text" id="tableName" name="tableName" onkeyup="checkValue(this)" class="form-control required" placeholder="输入带前缀完整的表名"  />
											</div>
										</div>
									</div>
									
							<div class="form-group">
							<label class="control-label col-md-3">属性:</label>
							<div class="col-md-6">
							<div class="input-icon right">
							<i class="fa"></i>
								<table class="table table-striped table-bordered table-condensed">
									<thead><tr><th>名称</th><th>类型</th></tr></thead>
									<tbody id="fieldTable"></tbody>
								</table>
								
								<div class="form-group">
										<label class="col-md-3 control-label">属性名称:</label>
										<div class="col-md-4">
											<div class="input-icon right">
												<i class="fa"></i>
												<input type="text" id="fieldName"  onkeyup="checkValue(this)" class="form-control " placeholder="输入属性名称"  />
											</div>
										</div>
									</div>
								
									<div class="form-body">
									<div class="form-group">
										<label class="col-md-3 control-label">属性类型:</label>
										<div class="col-md-4">
											<div class="input-icon right">
												<i class="fa"></i>
												<select name="fieldType" id="fieldType" class="form-control input-small select2me" data-placeholder="选择属性类型">
														<option value="shortStr">shortStr</option>
														<option value="mediumStr">mediumStr</option>
														<option value="longStr">longStr</option>
														<option value="dateTime">dateTime</option>
														<option value="long">long</option>
														<option value="decimal">decimal</option>
												</select>
											</div>
										</div>
									</div>
								</div>
								
							</div>
							</div>
						</div>
						
						<div class="form-group">
										<label class="control-label col-md-5">&nbsp;</label>
										<div class="col-md-4">
											<div class="input-icon right">
												<a class="btn btn-sm purple" href="#" onclick="add()">添加属性</a>
											</div>
										</div>
									</div>
								
								</div>
								<div class="form-actions fluid">
									<div class="col-md-offset-3 ">
										<button type="submit" class="btn blue">生成代码</button>
										<button type="button" class="btn default" onclick="history.back()">取消</button>
										<a href='${ctx}/code/table' class='btn blue'>由表创建</a>
										<a href='${ctx}/query' class='btn blue'>solr查询</a>
									</div>
								</div>
							</form>
							<!-- END FORM-->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>